<template>
  <div class="app-container h-auto min-h-full">
    <div class="flex gap-2">
      <div>
        只读：
        <vxe-switch
          v-model="formOptions.readonly"
          open-label="编辑"
          close-label="只读"
        ></vxe-switch>
      </div>
      <div>
        禁用
        <vxe-switch
          v-model="formOptions.disabled"
          open-label="编辑"
          close-label="禁用"
        ></vxe-switch>
      </div>
      <vxe-switch
        v-model="aaa"
        open-label="编辑"
        close-label="禁用"
        @change="switchChange"
      ></vxe-switch>
    </div>

    <y-form ref="formRef" :options="formOptions" @submit="submit">
      <template #text_title="{ data, field }">
        <div v-html="data[field + 'Title']"></div>
      </template>
      <template #action>
        <vxe-button type="reset">重置</vxe-button>
        <vxe-button type="submit" status="primary">提交</vxe-button>
      </template>
    </y-form>
  </div>
</template>

<script>
import XEUtils, { subtract } from 'xe-utils'

export default {
  data() {
    return {
      aaa: false,
      isDisabled: false,
      formOptions: {
        titleWidth: 120,
        readonly: false,
        disabled: false,
        data: {},
        items: [
          {
            field: 'text',
            span: 24,
            itemRender: {
              name: 'VxeInput',
              props: { maxLength: 10, showWordCount: true }
            },
            slots: { title: 'text_title' }
          },
          {
            field: 'password',
            title: '密码输入',
            span: 24,
            itemRender: {
              name: 'VxeInput',
              props: { type: 'password', clearable: true }
            }
          },
          {
            field: 'num',
            title: '数字',
            span: 24,
            itemRender: { name: 'VxeInput', props: { type: 'number' } }
          },
          {
            field: 'integer',
            title: '整数',
            span: 24,
            itemRender: { name: 'VxeInput', props: { type: 'integer' } }
          },
          {
            field: 'float',
            title: '小数',
            span: 24,
            itemRender: { name: 'VxeInput', props: { type: 'float' } }
          },
          {
            field: 'date',
            title: '日期',
            span: 24,
            itemRender: { name: 'VxeInput', props: { type: 'date' } }
          },
          {
            field: 'year',
            title: '年份',
            span: 24,
            itemRender: { name: 'VxeInput', props: { type: 'year' } }
          },
          {
            field: 'quarter',
            title: '季度',
            span: 24,
            itemRender: { name: 'VxeInput', props: { type: 'quarter' } }
          },
          {
            field: 'month',
            title: '月份',
            span: 24,
            itemRender: {
              name: 'VxeInput',
              props: { type: 'month', labelFormat: 'MM' }
            }
          },
          {
            field: 'week',
            title: '周',
            span: 24,
            itemRender: { name: 'VxeInput', props: { type: 'week' } }
          },
          {
            field: 'time',
            title: '时间',
            span: 24,
            itemRender: {
              name: 'VxeInput',
              props: { type: 'time', labelFormat: 'HH:mm' }
            }
          },
          {
            field: 'datetime',
            title: '日期带时间',
            span: 24,
            itemRender: {
              name: 'VxeInput',
              props: { type: 'datetime', labelFormat: 'yyyy-MM-dd HH:mm' }
            }
          },

          {
            field: 'startTime',
            title: '开始日期',
            span: 12,
            itemRender: {
              name: 'VxeInput',
              props: {
                type: 'date',
                clearable: true,
                disabledMethod: ({ date }) => {
                  const endTime = this.$refs.formRef.data.endTime
                  if (endTime) {
                    const eDate = XEUtils.toStringDate(endTime)
                    return date >= eDate
                  }
                  return false
                }
              }
            }
          },
          {
            field: 'endTime',
            title: '结束日期',
            span: 12,
            itemRender: {
              name: 'VxeInput',
              props: {
                type: 'date',
                clearable: true,
                disabledMethod: ({ date }) => {
                  const startTime = this.$refs.formRef.data.startTime
                  if (startTime) {
                    const sDate = XEUtils.toStringDate(startTime)
                    return date <= sDate
                  }
                  return false
                }
              }
            }
          },
          {
            field: 'flag2',
            title: '自定义名称',
            span: 24,
            itemRender: {
              name: 'VxeSwitch',
              props: { openLabel: '启用', closeLabel: '禁用' }
            }
          },

          {
            field: 'upload',
            title: '上传',
            itemRender: {
              name: 'ZUpload',
              props: {
                module: 'WebFile'
              },
              events: {
                success: (e) => {
                  console.log(e)
                }
              }
            }
          },
          {
            field: 'sele-select-dict',
            title: '下拉框 - 字典',
            itemRender: {
              name: 'ZSelect',
              props: {
                type: 'checkbox',
                dictCode: 'frame_user_type',
                bounds: {
                  myName: 'name',
                  myId: 'id'
                }
              },
              events: {
                change({ data, params: [a, b] }) {
                  console.log({ data, a, b })
                }
              }
            }
          },
          {
            field: 'edit',
            title: '富文本',
            itemRender: {
              name: 'YEditor'
            }
          },

          { align: 'center', span: 24, slots: { default: 'action' } }
        ]
      }
    }
  },
  mounted() {
    this.$refs.formRef.setData({
      text: '8409',
      textTitle: `<p class="text-red-500 font-bold">自定义标题</p>`,
      password: '000000',
      num: '112',
      integer: '12',
      float: '23.32',
      date: '2025-02-12',
      year: '2017-01-01',
      quarter: '2025-01-01',
      month: '2025-06-01',
      week: '2025-02-24',
      time: '16:24:24',
      datetime: '2025-02-15 03:03:03',
      flag2: true,
      upload: 'b6ebc857-a993-4998-909c-d32e8cf048471740541946151',
      'sele-select-dict': ['qd', 'pw', 'wxmnksyh'],
      edit: '<h1><strong>这里是文章信息<br /></strong><span style="font-size: 18pt; color: #ced4d9;">这里是描述信息</span><br /><img src="https://eps.ix2.com/public/web/20250226/4fdf7299-196b-412a-a1a4-aa8d984f147b1740541965611.jpg" alt="" width="369" height="274" /></h1>',
      myName: ['签到', '评委', '微信模拟考试用户'],
      myId: [2, 4, 7]
    })
  },
  methods: {
    aa(e) {
      console.log(e)
    },
    submit(e) {
      this.$message.success('请查看控制台输出')
      console.log(e)
    },
    switchChange(e) {
      const fileds = ['text', 'num']
      fileds.forEach((field) => {
        const item = this.$refs.formRef.$refs.vxeFormRef.getItemByField(field)

        if (item) {
          item.itemRender.props = {
            ...item.props,
            disabled: e.value
          }
        }
      })
    }
  }
}
</script>
